<template>
  <div class="webView login">
    <div class="login_info">
      <div class="login_form" v-if="ifdl">
        <p class="system_title">水美乡村</p>
        <el-form
          :model="loginForm"
          ref="loginRef"
          :status-icon="false"
          :rules="rules"
          v-if="logonmode"
        >
          <el-form-item class="login_item" prop="username">
            <el-input
              placeholder="用户名"
              prefix-icon="fa fa-user"
              v-model="loginForm.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            class="login_item"
            prop="password"
            style="margin-bottom: 10px"
          >
            <el-input
              placeholder="密码"
              prefix-icon="fa fa-lock"
              type="password"
              v-model="loginForm.password"
              readonly
              onfocus="this.removeAttribute('readonly');"
              @keyup.native.enter="loginSystem"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="loginSystem" style="width: 100%;"
          >登录
        </el-button>
        <div
          style="display: flex;justify-content: flex-end;margin-top: 10px; color: #409eff;"
        >
          <span @click="wjpass">忘记密码</span>
        </div>
      </div>
      <div class="login_form" v-if="!ifdl">
        <p class="system_title">水美乡村</p>
        <el-form
          ref="passwordForm"
          :model="passwordForm"
          label-width="90px"
          style="padding: 0px 0px;"
        >
          <el-form-item label="手机号码">
            <el-input
              v-model="passwordForm.phone"
              type="number"
              readonly
              onfocus="this.removeAttribute('readonly');"
            >
            </el-input>
            <el-button
              :type="vcodeText == '获取验证码' ? 'primary' : 'info'"
              @click="authentication_code"
              style="width: 110px; float: right; margin-right: 0;"
              :disabled="vcodeText != '获取验证码'"
            >
              {{ vcodeText }}
            </el-button>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input
              v-model="passwordForm.vcode"
              placeholder="请输入验证码"
              type="number"
              readonly
              onfocus="this.removeAttribute('readonly');"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="passwordForm.password"
              placeholder="输入新密码"
              show-password
              @input="
                passwordForm.password = passwordForm.password.replace(
                  /[^\x00-\xff]/g,
                  ''
                )
              "
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="confirmpassword"
              placeholder="确认新密码"
              show-password
              @input="
                confirmpassword = confirmpassword.replace(/[^\x00-\xff]/g, '')
              "
              clearable
            ></el-input>
          </el-form-item>
          <el-button
            type="primary"
            @click="user_update_account()"
            style="width: 100%;"
            >确认修改
          </el-button>
          <div
            style="display: flex;justify-content: flex-end;margin-top: 10px; color: #409eff;"
          >
            <span @click="wjpass">登录</span>
          </div>
        </el-form>
      </div>
    </div>
    <div class="website_info">
      <a href="http://www.jnaw.top" target="_blank"
        >©2022 AllView. All rights reserved.</a
      >
    </div>
  </div>
</template>
<script>
import { Message, Loading } from "element-ui";
import Vue from "vue";
import qs from "qs";

export default {
  data() {
    return {
      // 登录表单
      loginForm: {
        // 用户名
        username: "",
        // 密码
        password: "",
        // 用户名
        phone: "",
        // 密码
        vcode: "",
        // 是否记住密码
        rememberPassword: false
      },
      vcodeText: "获取验证码",
      logonmode: true,
      rules: {
        username: [
          {
            validator: this.formVerification,
            trigger: "blur"
          }
        ],
        password: [
          {
            validator: this.formVerification,
            trigger: "blur"
          }
        ],
        phone: [
          {
            validator: this.formVerification,
            trigger: "blur"
          }
        ],
        vcode: [
          {
            validator: this.formVerification,
            trigger: "blur"
          }
        ]
      },

      passwordForm: {
        phone: "",

        vcode: "",
        password: ""
      },

      confirmpassword: "",
      ifdl: true,
      timeClock: null
    };
  },
  created() {
    // console.log(222)
    sessionStorage.setItem(this.$apis.getLocalKey().user, "");
    this.$parent.idtc = false;
  },
  mounted() {
    // 初始化 登录
    this.init();
  },
  methods: {
    authentication_code() {
      var _this = this;
      if (!/^1[0-9]{10}$/.test(_this.passwordForm.phone)) {
        Message.error("手机号格式不正确");
        return;
      }
      _this.vcodeText = "正在发送";
      var datas = {
        phone: _this.passwordForm.phone
      };
      if (_this.vcodeText == "正在发送") {
        _this.$apis
          .phone_code(datas)
          .then(res => {
            // console.log(res)
            if (res.result == 0) {
              //倒计时60秒
              var timer_num = 60;
              _this.timeClock = setInterval(function() {
                timer_num--;
                _this.vcodeText = timer_num;
                if (timer_num == 0) {
                  clearInterval(_this.timeClock);
                  _this.vcodeText = "获取验证码";
                }
              }, 1000);
              _this.formData.vcode = res.vcode;
            } else {
              // Message.error('查询失败')
              _this.vcodeText = "获取验证码";
            }
          })
          .catch(err => {
            console.log(err);
            // _this.vcodeText == '获取验证码'
          });
      }
    },
    init() {
      // 表单
      const loginForm = this.loginForm;
      // 判断 账号密码 是否存在 cookie 内
      if (
        this.$utils.getCookie("username") &&
        this.$utils.getCookie("password")
      ) {
        // cookie 取出账号赋值
        loginForm.username = this.$utils.getCookie("username");
        // cookie 取出密码赋值
        loginForm.password = this.$utils.getCookie("password");
        // cookie 取出记住密码的状态赋值
        loginForm.rememberPassword = true;
      }
    },
    // 登录
    loginSystem() {
      var _this = this;
      if (_this.logonmode) {
        var data = {
          user_name: _this.loginForm.username,
          password: _this.loginForm.password
        };
        data.password = this.$md5(data.password);
        _this.$apis.doLogin(data).then(res => {
          if (res.result == 0) {
            // 存token
            sessionStorage.setItem("token", res.data.token);
            // sessionStorage.setItem("token", "aaa");

            sessionStorage.setItem(
              this.$apis.getLocalKey().user,
              JSON.stringify(res)
            );
            localStorage.setItem(
              this.$apis.getLocalKey().loginPersonnelInformation,
              JSON.stringify(res)
            );
            // _this.jurisdictionJudge(res.data)
            this.$router.push({
              path: "/sclt/homeManage/homeManage"
            });
            Message.success("登录成功");
          } else {
            Message.error("权限不足或账号密码错误");
          }
        });
      } else {
        var data = {
          phone: _this.loginForm.phone,
          vcode: _this.loginForm.vcode
        };

        _this.$apis.doLogin(data).then(res => {
          if (res.result == 0) {
            _this.jurisdictionJudge(res.data);
            _this.$parent.wsp(res.data.id);
            _this.$parent.notice_count(res.data.id);
          }
        });
      }
    },
    jurisdictionJudge(res) {},
    // 登录表单验证
    formVerification(rule, value, callback) {
      if (rule.field === "username") {
        if (!value) {
          return callback(new Error("账号不能为空"));
        }
      }
      // 密码验证
      if (rule.field === "password") {
        if (!value) {
          return callback(new Error("密码不能为空"));
        }
      }
      if (rule.field === "phone") {
        if (!value) {
          return callback(new Error("手机号不能为空"));
        }
      }
      if (rule.field === "vcode") {
        if (!value) {
          return callback(new Error("验证码不能为空"));
        }
      }
      callback();
    },
    chenge() {
      this.logonmode = !this.logonmode;
    },
    wjpass() {
      var _this = this;
      this.ifdl = !this.ifdl;
      _this.passwordForm = {
        phone: "",
        vcode: "",
        password: ""
      };
      _this.confirmpassword = "";
      _this.vcodeText = "获取验证码";
      clearInterval(_this.timeClock);
    },
    user_update_account() {
      var _this = this;
      var datas = _this.passwordForm;
      // datas.id = _this.userInfo.id
      // datas.phone = _this.pdphone
      // if (datas.code = '') {
      // 	Message.error('新密码不能为空')
      // 	return
      // }
      // console.log(datas)
      if (datas.password == "") {
        Message.error("新密码不能为空");
        return;
      }
      if (datas.password != _this.confirmpassword) {
        Message.error("两次密码输入不一致");
        return;
      }

      _this.$apis.user_update_account(datas).then(res => {
        if (res.result == 0) {
          Message.success("修改成功");

          _this.ifdl = !_this.ifdl;
          _this.passwordForm = {
            phone: "",
            vcode: "",
            password: ""
          };
          _this.confirmpassword = "";
          _this.vcodeText = "获取验证码";
          clearInterval(_this.timeClock);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login {
  position: relative;
  background-image: url(../assets/img/background.png);
  background-size: cover;
  background-position: 50%;
}

.login_info {
  position: absolute;
  width: 350px;
  height: 400px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.login_form {
  background: #fff;
  padding: 25px 20px 40px 20px;
  border-radius: 5px 5px 5px 5px;

  button {
    width: 100%;
    margin: 20px 0 0;
  }
}

.login_form .el-checkbox {
  margin: 8px 0 0 0;
}

.system_title {
  font-size: 24px;
  text-align: center;
  padding: 0 0 20px;
  font-weight: bold;
  color: #737373;
}

.website_info {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 45px;

  a {
    &:hover {
      text-decoration: underline;
    }
  }

  a,
  p {
    font-size: 14px;
    /*color: #000;*/
    color: #fff;
  }
}

.el-form-item {
  margin-right: 0 !important;
}
</style>
